<template>
	<view class="person">
		<view class="person-header">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="person-avatar">
					<image v-if="userStore.user.avatar" :src="userStore.user.avatar" mode="aspectFill"></image>
					<image v-else src="../../static/images/logo.png" mode="aspectFill"></image>
				</view>
				<view class="person-name">
					修改头像
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</button>

		</view>
		<view class="person-body">
			<view class="person-item" @click="handlePopupName">

				<view class="person-item-label">
					<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop"
						size="small">姓名
					</uni-badge>
				</view>
				<view class="person-item-value">
					{{ userProfileForm.name }}
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="person-item" @click="handlexingbiePopup">
				<view class="person-item-label">
					性别
				</view>
				<view class="person-item-value">
					{{ gender }}
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="person-item" @click="handlePopupPhone">
				<view class="person-item-label">
					<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop"
						size="small">手机号
					</uni-badge>
				</view>
				<view class="person-item-value">
					{{ userProfileForm.phone }}
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="person-item" @click="handlePopupNumber">
				<view class="person-item-label">
					身份证号
				</view>
				<view class="person-item-value">
					{{ userProfileForm.idNumber }}
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 姓名弹窗 -->
		<uni-popup ref="inputNameDialog" type="dialog">
			<uni-popup-dialog v-if="isNameDialog" mode="input" title="修改姓名" v-model=userProfileForm.name
				placeholder="请输入新的姓名" @confirm="dialogInputConfirmName"></uni-popup-dialog>
		</uni-popup>
		<!-- 电话弹窗 -->
		<uni-popup ref="inputPhoneDialog" type="dialog">
			<uni-popup-dialog v-if="isPhoneDialog" mode="input" title="修改手机号" v-model=userProfileForm.phone
				placeholder="请输入新的手机号" @confirm="dialogInputConfirmPhone"></uni-popup-dialog>
		</uni-popup>
		<!-- 身份弹窗 -->
		<uni-popup ref="inputNumberDialog" type="dialog">
			<uni-popup-dialog v-if="isNumberDialog" mode="input" title="修改身份证号" v-model=userProfileForm.idNumber
				placeholder="请输入新的身份证号" @confirm="dialogInputConfirmNumber"></uni-popup-dialog>
		</uni-popup>

		<view class="person-footer">
			<button @click="submit">提交</button>
		</view>
	</view>


</template>

<script setup>
import { getUserInfo, updateUserInfo } from '@/api/apis.js'
import {useUserStore} from '@/stores/index.js';
import {uploadAvatar} from '@/api/uploadFileapi.js'
import {ref, onMounted} from 'vue'

const userStore = useUserStore();
// 头像
const onChooseAvatar = (e) => {
	// console.log(e);
	uploadAvatar({
		filePath: e.detail.avatarUrl,
		name: 'avatar'
	}).then(res => {
		// console.log(res);
		userStore.user.avatar = res;
		uni.showToast({
			title: '上传成功',
			icon: 'success'
		});
	}).catch(err => {
		console.log("err",err);
	})
}

const userProfileForm = ref({
	avatar: '', // 头像
	name: '', // 姓名
	sex: 3,  // 性别 1男 2女 3保密
	phone: '', // 手机号
	idNumber: '' // 身份证号
})

// 根据 userProfileForm.sex 的值初始设置 gender
const gender = ref(userProfileForm.value.sex === 1 ? '男' : userProfileForm.value.sex === 2 ? '女' : '保密');
const value = ref(1)

const isNameDialog = ref(false)
const inputNameDialog = ref(null)
// 姓名弹窗
const handlePopupName = () => {
	inputNameDialog.value.open()
	isNameDialog.value = true
}
const dialogInputConfirmName = () => {
	console.log("确认输入：" + userProfileForm.value.name);
	isNameDialog.value = false
	inputNameDialog.value.close()
}

// 手机弹窗
const isPhoneDialog = ref(false)
const inputPhoneDialog = ref(null)
const handlePopupPhone = () => {
	inputPhoneDialog.value.open()
	isPhoneDialog.value = true
}
const dialogInputConfirmPhone = () => {
	console.log("确认输入：" + userProfileForm.value.phone);
	isPhoneDialog.value = false
	inputPhoneDialog.value.close()
}

// 身份证弹窗
const isNumberDialog = ref(false)
const inputNumberDialog = ref(null)
const handlePopupNumber = () => {
	inputNumberDialog.value.open()
	isNumberDialog.value = true
}
const dialogInputConfirmNumber = () => {
	console.log("确认输入：" + userProfileForm.value.idNumber);
	isNumberDialog.value = false
	inputNumberDialog.value.close()
}

// 性别弹窗
const handlexingbiePopup = () => {
	uni.showActionSheet({
		itemList: ['男', '女', '保密'],
		success(res) {
			let selectedSex = '';
			let sexNumber = 0;
			switch (res.tapIndex) {
				case 0: // 0表示男
					selectedSex = '男';
					sexNumber = 1; // 发送给后端的数字
					break;
				case 1: // 1表示女
					selectedSex = '女';
					sexNumber = 2; // 发送给后端的数字
					break;
				case 2: // 2表示保密
					selectedSex = '保密';
					sexNumber = 3; // 发送给后端的数字
					break;
			}

			userProfileForm.value.sex = sexNumber;
			gender.value = selectedSex; // 前端显示的性别
			console.log("选中的性别：" + selectedSex);

		},
		fail(res) {
			console.log(res.errMsg);
		}
	});
}

// 提交
const submit = () => {
	// 校验姓名
	if (!userProfileForm.value.name || userProfileForm.value.name.length < 1 || userProfileForm.value.name.length > 20) {
		return uni.showToast({
			title: '姓名不能为空且长度应在1到20个字符之间',
			icon: 'none'
		});
		
	}

	// 校验手机号
	const phoneRegex = /^1[3-9]\d{9}$/; // 简单的手机号格式校验
	if (!phoneRegex.test(userProfileForm.value.phone)) {
		return uni.showToast({
			title: '手机号格式不正确',
			icon: 'none'
		});
	}

	// 校验身份证号
	const idNumber = userProfileForm.value.idNumber;
	if (idNumber.length !== 15 && idNumber.length !== 18) {
		return uni.showToast({
			title: '身份证号长度应为15或18位',
			icon: 'none'
		});
	}
	// console.log("提交：" + userProfileForm.value.name + " " + userProfileForm.value.phone + " " + userProfileForm.value.idNumber + " " + userProfileForm.value.sex);
	// console.log("提交：" + JSON.stringify(userProfileForm.value));

	uni.showModal({
		title: '提示',
		content: "确定提交吗？",
		success: async (res) => {
			console.log(res);
			await updateUserInfo(userProfileForm.value).then(res => {
				console.log(res);
				uni.showToast({
					title: '提交成功',
					icon: 'success', // 或 'none' 取决于你的需求
					duration: 500 // 可选，延迟关闭，单位ms
				});
				userStore.user.name = userProfileForm.value.name;
				// console.log("更新后的用户名：" + userStore.user.name);
				// 刷新页面
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 500);

			}).catch(err => {
				console.log(err);
				uni.showToast({
					title: '提交失败',
					icon: 'error'
				});
			})
		}
	})
}
onMounted(async () => {
	await getUserInfo().then(res => {
		// console.log(res);
		userProfileForm.value = res.data;
		gender.value = res.data.sex === 1 ? '男' : res.data.sex === 2 ? '女' : '保密';
	}).catch(err => {
		console.log(err);
		uni.showToast({
			title: '获取用户信息失败',
			icon: 'error'
		});
	})

})


</script>

<style lang="scss" scoped>
.person {
	height: 100vh;
	width: 100%;
	background-color: #eee;

	.person-header {
		background-color: #fff;
		padding: 20rpx;
		border-bottom: 20rpx solid #e3e3e3;

		.avatar-wrapper {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background: none; // 去掉默认背景
			outline: none; // 消除默认点击蓝色边框效果

			display: flex;
			align-items: center;
			justify-content: space-between;

			&::after {
				border: none; // 去掉默认边框，要这样不然又边线出现
			}

			.person-avatar {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				margin-right: 20px;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.person-name {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #333;
			}


		}


	}

	.person-body {
		padding: 0 5rpx;
		border-bottom: 20rpx solid #e3e3e3;

		.person-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			height: 100rpx;
			padding: 0 15rpx;
			border-bottom: 5rpx solid #e3e3e3;
			border-radius: 10rpx;


			.person-item-label {
				font-size: 28rpx;
				color: #333;
				// flex-basis: 20%;
			}

			.person-item-value {
				font-size: 28rpx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.uni-icons {
					color: #999;
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
		}

		.person-item:last-child {
			border-bottom: none;
		}
	}

	.person-footer {
		position: fixed;
		/* 固定定位 */
		bottom: 0;
		/* 距离屏幕底部为0 */
		left: 0;
		/* 距离屏幕左侧为0 */
		right: 0;
		/* 距离屏幕右侧为0 */
		padding: 10rpx;
		/* 根据需要设置内边距 */
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);

		/* 可选，给它一个阴影效果 */
		button {
			background-color: $brand-theme-color;
			color: #fff;
		}
	}

}
</style>